<div class="wrapper-comp-settings is-active editor-with-buttons" id="settings-tab">
  <ul class="list-input settings-list">
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="oppiaid">Oppia exploration ID</label>
        <input class="input setting-input" name="oppiaid" id="oppiaid" value="{oppiaid}" type="text" />
      </div>
      <span class="tip setting-help">Example: a4j3jdj21tvv</span>
    </li>
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="src">Oppia server URL</label>
        <input class="input setting-input" name="src" id="src" value="{src}" type="text" />
      </div>
      <span class="tip setting-help">Example: https://www.oppia.org</span>
    </li>
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="width">Width</label>
        <input class="input setting-input" name="width" id="width" value="{width}" type="text" />
      </div>
      <span class="tip setting-help">Width of the embedded exploration</span>
    </li>
    <li class="field comp-setting-entry is-set">
      <div class="wrapper-comp-setting">
        <label class="label setting-label" for="height">Height</label>
        <input class="input setting-input" name="height" id="height" value="{height}" type="text" />
      </div>
      <span class="tip setting-help">Height of the embedded exploration</span>
    </li>
  </ul>
  <div class="xblock-actions">
    <ul>
      <li class="action-item">
        <a href="#" class="button action-primary save-button">Save</a>
      </li>
      <li class="action-item">
        <a href="#" class="button cancel-button">Cancel</a>
      </li>
    </ul>
  </div>
</div>
